<template>
	<h2>
		欢迎<span style="color:blue">{{name}}</span>,
		请选择<span style="color:red;"> {{limit}} </span>名学生,
		目前已经选择<span style="color:blue"> {{currentNum}} </span>名
		<el-button size="large" v-if="currentNum>0" type="primary" style="font-size:18px;"
			@click="showSelected=true">查看已选择名单</el-button>
	</h2>
	
	<el-table :data="students" stripe border >
		<el-table-column type="index" width="60" align="center" label="序号">
		</el-table-column>
		<el-table-column prop="studentno" width="120" align="center" label="学号">
		</el-table-column>
		<el-table-column prop="studentname" width="80"  align="center" label="姓名">
		</el-table-column>
		<el-table-column prop="classname" width="160"  align="center" label="班级">
		</el-table-column>
		<el-table-column prop="time" width="160"  align="center" label="选择时间">
			<template #default="scope">
			     <span>{{ toDate(scope.row.time) }}</span>
			 </template>
		</el-table-column>
		<el-table-column label="操作" width="80"  v-if="currentNum<limit">
			<template #default="scope">
				<el-button type="primary" @click="dealChoice(scope.row,scope.$index)">选择</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<el-dialog title="已选学生清单" v-model="showSelected">
		<el-table :data="choiceStudents" stripe border >
			<el-table-column type="index" width="60" align="center" label="序号">
			</el-table-column>
			<el-table-column prop="studentno" width="120" align="center" label="学号">
			</el-table-column>
			<el-table-column prop="studentname" width="80"  align="center" label="姓名">
			</el-table-column>
			<el-table-column prop="classname" width="160"  align="center" label="班级">
			</el-table-column>
			<el-table-column prop="selecttime" width="240"  align="center" label="选择时间">
			</el-table-column>
		</el-table>
		<div style="text-align: center;">
			<el-button style="margin-top: 15px;"  @click="showSelected=false" type="primary">返回</el-button>
		</div>		
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				limit: 0,
				currentNum:0,
				students:[],
				choiceStudents:[],
				showSelected:false
			}
		},
		methods: {
			toDate(e){
				return new Date(Number(e)).toLocaleString();
			},
			async dealChoice(e,index){				
				const formData = new FormData();
				formData.append("studentno", e.studentno);
				formData.append("msgId", e.id);
				formData.append("time", e.time);
				let result = await this.$axios.post("/teacher/dealChoice", formData);
				let {code,msg}=result.data;
				ElMessageBox.alert(msg, "提示");
				this.students.splice(index,1);
				this.getChoiceStudent();
			},
			async getChoice() {
				//目前轮次turnNum可由系统管理员设置在数据库表字段中
				let result = await this.$axios("/teacher/getChoice", {
					params: {
						turnNum: 1
					}
				});
				let { code, msg, data } = result.data;
				if(code==0) this.students=data;
			},
			async getMe() {
				let result = await this.$axios("/teacher/me");
				let {
					code,
					msg,
					data
				} = result.data
				if (code == 0) {
					this.limit = data.limitnum;
					this.name = data.teachername;
					this.getChoice();
				} else ElMessageBox.alert(msg, "提示");
			},
			async getChoiceStudent(){
				let result = await this.$axios("/teacher/getSelect");
				let {code,count,msg,data}=result.data;
				if(code==0){
					this.currentNum=count;
					this.choiceStudents=data;
				}
				console.log(result.data);
			}
		},
		mounted() {
			this.getMe();
			this.getChoiceStudent();
		}
	}
</script>

<style>
</style>